<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<div id="app">
    <div style="float: left">
<!--        <div>-->
<!--            <div>-->
<!--                <label>连接地址：</label>-->
<!--            </div>-->
<!--            <input v-model="url" style="width: 200px">-->
<!--        </div>-->
<!--        <div style="margin-top: 5px">-->
<!--            <button @click="connect" style="width: 100px">连接</button>-->
<!--            <button @click="disconnect" style="width: 100px">断开</button>-->
<!--        </div>-->
        <div>
            <div>
                <label>消息：</label>
            </div>
            <input v-model="message" style="width: 200px;">
            <div style="margin-top: 5px;">
                <button @click="send" style="width: 100px;">发送</button>
            </div>
        </div>
    </div>
    <div style="margin-left: 220px;">
        <div v-for="view in views">
            <span>{{ view.name}}：</span>
            <span>{{ view.text }}</span>
        </div>
    </div>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            url: 'ws://localhost:8080/echo?id=123',
            message: null,
            views: [],
            webSock: null
        },
        created: function() {
            this.initWebSocket();
        },
        methods: {
            initWebSocket: function() {
                this.webSock = new WebSocket(this.url);
                this.webSock.onopen = this.webSocketOnOpen;
                this.webSock.onmessage = this.webSocketOnMessage;
                this.webSock.onerror = this.websocketonerror;
                this.webSock.onclose = this.websocketclose;
            },
            // connect: function () {
            //     this.ws = ws;
            //     ws.onopen = function (evt) {
            //         console.log("连接成功……");
            //     }
            //     ws.onmessage = function (evt) {
            //         console.log("收到消息: ", evt.data)
            //         this.view = evt.data;
            //     }
            // },
            webSocketOnOpen: function() {
                console.log("连接成功……");
            },
            webSocketOnMessage: function(evt) {
                console.log("收到消息: ", evt.data)
                this.views.push({'name': 'juju', 'text': evt.data});
                this.message = null;
            },
            disconnect: function () {

            },
            send: function () {
                axios.get(`http://localhost:8080/msg/send?id=123&data=${this.message}`)
                    .then(res => {
                        alert(res.data)
                        console.log(res.data)
                    })
                    .catch(err => {
                        console.log(err)
                    })
            }
        }
    })
</script>
</body>
</html>